<script setup>
import { EnvironmentTwoTone } from '@ant-design/icons-vue';
import { onMounted, ref } from 'vue';
import { useRouter } from 'vue-router'
import { useLocStore } from '@/stores/location';

const router = useRouter()
const locStore = useLocStore()
const open = ref(false);

const selectedLoc = ref('全国')

const handleOk = () => {
  locStore.changeLoc(selectedLoc.value)
  open.value = false
}

onMounted(() => {
  const image = document.querySelector('.ant-avatar img')
  if (image != null) {
    image.addEventListener('click', () => router.push('/personal'))
  }
  const username = document.querySelector('.ant-page-header-heading-title')
  if (username != null) {
    username.style.color = 'white'
  }
})

const recommend = () => {
  router.push({
    name: 'jobInfoDisplay',
    query: {
      keyword: '',
      loc: ''
    }
  }).then(() => router.go(0))
}
</script>

<template>
  <div class="components-page-header-demo-content">
    <a-page-header title="username" class="site-page-header"
                   :avatar="{ src: 'https://tse2-mm.cn.bing.net/th/id/OIP-C.gfkHd2miafHurt9WLToRrAHaGO?w=178&h=180&c=7&r=0&o=5&dpr=1.6&pid=1.7' }">
      <template #extra>
        <EnvironmentTwoTone />
        <a-button key="6" type="text" :innerHTML="locStore.locHTML" @click="() => open = true"
                  class="hBtn"></a-button>
        <a-button key="5" type="text" @click="() => router.push('/').then(() => router.go(0))" class="hBtn">首页</a-button>
        <a-button key="4" type="text" class="hBtn" @click="recommend">推荐</a-button>
        <a-button key="3" type="text" class="hBtn" @click="() => router.push('/message').then(() => router.go(0))">消息</a-button>
        <a-button key="2" type="text" class="hBtn">公司</a-button>
        <a-button key="1" type="text" @click="() => router.push('/forum').then(() => router.go(0))" class="hBtn">资讯</a-button>
      </template>
    </a-page-header>
  </div>
  <a-modal v-model:open="open" title="选择城市" @ok="handleOk">
    <div v-for="group in locStore.siteGroup">
      {{ group.firstChar }}：
      <a-radio-group v-model:value="selectedLoc" style="margin-bottom: 10px;">
        <a-radio-button v-for="city in group.cityList" :value="city.name">{{ city.name }}</a-radio-button>
      </a-radio-group>
    </div>
  </a-modal>
</template>

<style scoped>
.components-page-header-demo-content {
  width: 100%;
  background: linear-gradient(to right, #1a1417, #207e91);
  height: 12vh;
}

.hBtn {
  color: white;
}

.hBtn:hover {
  color: gold;
}
</style>
